<template>
  <el-dialog
    :modal="modal"
    :title="title"
    :visible.sync="dialogVisible"
    width="30%"
    class="common-confirm-dialog"
    @close="close"
  >
    <p style="margin: 15px 10px">{{ this.content }}</p>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="cancel">{{ cancelText }}</el-button>
      <el-button
        v-if="onConfirm && type == 'primary'"
        size="small"
        :loading="loading"
        :type="type"
        @click="confirm"
      >{{ btnSureTitle }}</el-button>
      <el-button
        v-if="onConfirm && type == 'danger'"
        size="small"
        :type="type"
        :loading="loading"
        @click="confirm"
      >
        <svg-icon v-if="showIcon" icon-class="trash" />
        {{ btnSureTitle }}
      </el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: 'CommonConfirm',
  props: {},
  data() {
    return {
      title: 'Tip',
      content: '',
      dialogVisible: false,
      btnSureTitle: 'Ok',
      onConfirm: undefined,
      onCancel: undefined,
      type: 'primary',
      cancelText: '',
      showIcon: true
    }
  },
  methods: {
    confirm() {
      if (this.onConfirm) {
        this.onConfirm(this, this.close)
      }
    },
    cancel() {
      if (this.onCancel) {
        this.onCancel()
        this.close()
      } else {
        this.close()
      }
    },
    showConfirmDialog(title, content, btnSureTitle, confirm, cancel) {
      this.title = title
      this.content = content
      this.btnSureTitle = btnSureTitle
      this.onConfirm = confirm
      this.onCancel = cancel
      this.dialogVisible = true
      this.type = 'primary'
    },
    showDeleteDialog(title, content, btnDeleteTitle, confirm, cancel) {
      this.title = title
      this.content = content
      this.btnSureTitle = btnDeleteTitle
      this.onConfirm = confirm
      this.onCancel = cancel
      this.dialogVisible = true
      this.type = 'danger'
    },
    close() {

    },
    handleClose(done) {
      done()
    }
  }
}
</script>
